
    .abstract-item::before,
    .abstract-item::after {
      box-sizing: inherit;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .abstract-item {
      transition: color 0.25s;
    }
   .abstract-item::before,
    .abstract-item::after {
      border: 2px solid transparent;
      width: 0;
      height: 0;
    }
    /* 单向变色*/
    .abstract-item:nth-child(3n+1)::before {
      top: 0;
      left: 0;
    }

    .abstract-item:nth-child(3n+1)::after {
      bottom: 0;
      right: 0;
    }

    .abstract-item:nth-child(3n+1):hover {
      color: #60daaa;
    }

    .abstract-item:nth-child(3n+1):hover::before,
    .abstract-item:nth-child(3n+1):hover::after {
      width: 100%;
      height: 100%;
    }

    .abstract-item:nth-child(3n+1):hover::before {
      border-top-color: #60daaa;
      border-right-color: #60daaa;
      transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    }

    .abstract-item:nth-child(3n+1):hover::after {
      border-bottom-color: #60daaa;
      border-left-color: #60daaa;
      transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    }

    /*双向变色 */
    .abstract-item:nth-child(3n+2)::before {
      top: 0;
      left: 0;
    }

    .abstract-item:nth-child(3n+2)::after {
      bottom: 0;
      right: 0;
    }

    .abstract-item:nth-child(3n+2):hover {
      color: #60daaa;
    }

    .abstract-item:nth-child(3n+2):hover::before,
    .abstract-item:nth-child(3n+2):hover::after {
      width: 100%;
      height: 100%;
    }

    .abstract-item:nth-child(3n+2):hover::before {
      border-top-color: #60daaa;
      border-right-color: #60daaa;
      transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    }

    .abstract-item:nth-child(3n+2):hover::after {
      border-bottom-color: #60daaa;
      border-left-color: #60daaa;
      transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
    }
     .abstract-item:nth-child(3n+2):hover {
      color: #fbca67;
    }

    .abstract-item:nth-child(3n+2)::after {
      top: 0;
      left: 0;
    }

    .abstract-item:nth-child(3n+2):hover::before {
      border-top-color: #fbca67;
      border-right-color: #fbca67;
    }

    .abstract-item:nth-child(3n+2):hover::after {
      border-bottom-color: #fbca67;
      border-left-color: #fbca67;
      transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
    }


   /*中心变色*/
    .abstract-item:nth-child(3n+3):hover {
      color: #6477b9;
    }

    .abstract-item:nth-child(3n+3)::before,
    .abstract-item:nth-child(3n+3)::after {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      -webkit-transform-origin: center;
      transform-origin: center;
    }

    .abstract-item:nth-child(3n+3)::before {
      border-top: 2px solid #6477b9;
      border-bottom: 2px solid #6477b9;
      -webkit-transform: scale3d(0, 1, 1);
      transform: scale3d(0, 1, 1);
    }

    .abstract-item:nth-child(3n+3)::after {
      border-left: 2px solid #6477b9;
      border-right: 2px solid #6477b9;
      -webkit-transform: scale3d(1, 0, 1);
      transform: scale3d(1, 0, 1);
    }

    .abstract-item:nth-child(3n+3):hover::before,
    .abstract-item:nth-child(3n+3):hover::after {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
      transition: transform 0.5s, -webkit-transform 0.5s;
    }
    //背景遮罩层
    .hero::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.5);
}
